<template>
  <div class="limit-warning-box">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                      v-model="formdata.companyId"
                      :optionlist="xitonglist"
                      @changeSelect="changeqiye"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="日期">
                      <el-date-picker
                        size="small"
                        v-model="formdata.value1"
                        format="yyyy-MM"
                        value-format="yyyyMM"
                        type="monthrange"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
                      </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button size="small" type="primary" @click="getlist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <TopTitle @command="command" @daochu="daochu" @shuaxin="getlist" />
      <div class="table">
        <TableColumn
          :issize="iissize"
          ref="tabledataref"
          :tableData="tableData"
          :tableConfig="tableConfig"
        >
          <el-table-column label="是否超额" min-width="100">
            <template #default="{ row }">
              <div :style="{color:row.excessFlag?'red':'green'}">
                {{row.excessFlag?'是':'否'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="100">
            <template #default="{ row }">
              <div>
                <el-link type="primary" :underline="false" @click="toreport(row)" class="link">月超额情况</el-link>
              </div>
            </template>
          </el-table-column>
        </TableColumn>
      </div>
      <div class="fenye">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="getlist"
            :page-size="15"
            :total="total"
          >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import TableColumn from '@/components/Table/index.vue'
import dayjs from 'dayjs'
import { getCompanyListApi } from '@/api/energy-consumption/Equipment-energy/Energy-analysis'
import TopTooltip from '@/components/TopTitle/newtitle.vue'
import { exportexcel } from '@/utils/excel'
import {getMonthPageapi} from '@/api/energy-consumption/demand/limit-warning'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTooltip,
    TableColumn
  },
  data() {
    return {
      pageNo:0,
      total:0,
      formdata:{},
      iissize: 'medium',
      xitonglist:[],
      tableData:[],
      tableConfig:[
        { label: '序号', type: 'index', width: '100', center: 'center' },
        { label: '企业', prop: 'companyName' },
        { label: '年月', prop: 'yearMonth' },
        { label: '预算电量(kWh)', prop: 'budgetEnergy' },
        { label: '实际电量(kWh)', prop: 'actualEnergy' },
        { label: '差额', prop: 'surplus' },
      ]
    };
  },

  async mounted() {
    const { data: { list } } = await getCompanyListApi()
    this.xitonglist = list
    this.formdata={value1:[dayjs().format('YYYY')+'01',dayjs().format('YYYYMM')]}
    const companyId = localStorage.getItem('companyId')
    this.$set(this.formdata,'companyId',companyId?+companyId:list[0].id)
    this.getlist()
  },

  methods: {
    async getlist(){
      this.$refs.tabledataref.loading=true
      const pageNo=this.pageNo-1
      const {companyId,value1} =this.formdata
      const {data:{list,totalCount}}=await getMonthPageapi({pageNo,pageSize:15,companyId,yearMonthStart:value1[0],yearMonthEnd:value1[1]})
      this.total=totalCount
      this.tableData=list
      this.$refs.tabledataref.loading=false
    },
    toreport(row){
      this.$router.push({
        name: 'month-month',
        // 通过 meta 传递对象（无需序列化）
        params: { ...row,...this.formdata,reportName:'月超额情况',reportValue:'month'} 
      })
    },
    changeqiye(val){
      localStorage.setItem('companyId', val)
    },
    daochu(){
      const {companyId,value1} =this.formdata
      exportexcel(
        '/ecm-microservice-biz/ecm/pre/actual/management/month/exportExcel',
        {companyId,yearMonthStart:value1[0],yearMonthEnd:value1[1]},'月超额预警'
      )
    },
    chongzhi(){
        this.formdata={value1:[dayjs().format('YYYY')+'01',dayjs().format('YYYYMM')]}
        const companyId = localStorage.getItem('companyId')
        this.$set(this.formdata,'companyId',companyId?+companyId:list[0].id)
        this.getlist()
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    },
  },
};
</script>
<style lang="scss" scoped>
.limit-warning-box {
  height: 100%;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .table{
      height: 88%;
      .link{
        margin-right: 10px;
      }
    }
    .fenye{
      margin-top: 10px;
      text-align: right;
    }
  }
}
</style>